<template>
  <h1>未解构</h1>
  <p>显示内容1：{{ mainStory.testPinia1 }}</p>
  <p>显示内容2：{{ mainStory.testPinia2 }}</p>
  <hr/>
  <h1>解构后</h1>
  <p>显示内容1：{{ testPinia1 }}</p>
  <p>显示内容2：{{ testPinia2 }}</p>
  <hr/>
  <h1>数组操作</h1>
  <p>{{ testArr }}</p>
  <hr/>
  <button @click="updateData">修改内容</button>
  <hr/>
  <p>{{ mainStory.addOne }}</p>
  <p>{{ mainStory.addOne }}</p>
  <p>{{ mainStory.addOne }}</p>
</template>

<script setup lang="ts">
import {useMainStore} from '../story';
import {storeToRefs} from "pinia";

const mainStory = useMainStore()

console.log(mainStory.testPinia);

/*普通解构使用*/
// const {testPinia1, testPinia2} = mainStory

/*解决解构数据不更新问题*/
const {testPinia1, testPinia2, testArr, count} = storeToRefs(mainStory)

/*打印*/
console.log(testPinia1.value);

const updateData = () => {
  // mainStory.testPinia1 = '修改成功';

  /*状态更新*/
  //方式一：直接赋值更新
  // mainStory.testPinia1 = '已更新';

  //方式二：使用$patch更新多个数据  批量更新
  // mainStory.$patch({
  //   testPinia1: '已更新1',
  //   testPinia2: '已更新2',
  // })

  //方式三：直接拿到 state进行修改  批量
  // mainStory.$patch(state => {
  //   state.testArr.push(4)
  // })

  //方式四：封装到action中使用
  mainStory.changeState();
};

</script>

<style scoped>

</style>